<template>
  <div>
    <el-row v-if="options.topTip" class="width-p100">
      <p v-html="options.topTip"></p>
    </el-row>
    <u-table ref="multipleTable" :height="initTableHeight()" :data="tableData" :stripe="options.stripe || true" :border="options.border || true" :tooltip-effect="options.tooltipEffect || 'dark'" row-key="id" lazy :load="load" default-expand-all :tree-props="{children: 'children',hasChildren:'hasChildren'}" selectTrClass="selectTr" @selection-change="handleSelectionChange" style="width: 100%">
      <template slot="empty">
        <avue-empty></avue-empty>
      </template>
      <u-table-column v-if="options.selection || false" type="selection" :selectable="selectable" fixed></u-table-column>
      <u-table-column v-for="(item,index) in tableData" :key="index" prop="date" label="日期" width="150" :fixed="item.fixed || false" :show-overflow-tooltip="options.showOverflowTooltip || true">
      </u-table-column>
      <u-table-column prop="name" label="姓名" >
      </u-table-column>
      <u-table-column fixed="right" label="操作" :width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </u-table-column>
    </u-table>
  </div>
</template>

<script>
/**
 * @options 对象
 * -selection 是否显示选择框                   类型： true false
 * -formatSelection 格式化选择框方法           类型： function(row, index) 例子：formatSelection(row, index) {if(index == 1) {return true} else {return false}},
 * -topTip 顶部提示                           类型： string
 * border: 表格边框                           类型： true false
 * @options.column  : 字段对象结构 集合                 类型： 数组
 * --{
 * ----showOverflowTooltip 是否一行显示       类型 Boolean
 * ----tooltipEffect 默认black
 * ----align 位置 可选值：left/center/right
 * ----
 * ----
 * ----
 * --}
 */
export default {
  data() {
    return {
      sexList: [
        { value: 1, label: "" },
        { value: 2, label: "女" },
        { value: 3, label: "未知" },
      ],
      columns: Array.from({ length: 8 }, (_, idx) => ({
        prop: 'address', id: idx, label: '地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址' + idx,
      })),
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      //默认配置
      AllOptions: {
        tooltipeffect: false,
        stripe: true, //斑马线
        border: true, //table边框
        selection: true,//切换多选
        showheader: true, // 显示表头
        column: [
          //具体数据的配置
          {
            label: "列名", // 列名
            prop: "name", // 属性名
            fixed: false, // 是否固定
            width: "123", // 列宽度
            sortable: true, // 排序
            order: '',// 位置排序
          },
          {
            fixed: false,
            label: "列名", // 列名
            prop: "name", // 属性名
          },
        ],
      },
    }
  },
  props: {
    options: { type: Object, default() { return {} } }
  },
  methods: {
    //过滤可选中行
    selectable(row, index) {
      // console.log(row, index, '过滤 可选 行')
      if (this.options.selection && this.options.formatSelection) return this.options.formatSelection(row, index)
      return true
    },
    //
    toggleSelection(rows, type) {
      console.log(rows, type, 'toggleSelection')
      if (rows) {
        rows.forEach(row => {
          // 注意： 勾选方法与element不同哦
          // this.$refs.multipleTable.toggleRowSelection(row); // element表格是这样写的
          // 我们得这样写

          // 如果是固定选中
          if (type === '固定选中') {
            // toggleRowSelection方法参数不懂得去看文档api哦
            this.$refs.multipleTable.toggleRowSelection([
              {
                row: row,
                selected: true
              }
            ])
            // 下面这是切换选中
          } else {
            this.$refs.multipleTable.toggleRowSelection([
              {
                row: row
              }
            ])
          }
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //多选调用
    handleSelectionChange(arr) {
      console.log(arr, '多选行数据数组')
    },
    //懒加载调用
    load(tree, treeNode, resolve) {
      console.log(tree, treeNode, resolve, '000')
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ])
      }, 1000)
    },
    //初始化
    init() {
      this.initTableHeight()//初始化 table 高度
    },
    initTableHeight() {
      return 500
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped lang="scss">
/deep/ .selectTr td {
  background: rgb(240, 220, 220) !important;
  color: #888 !important;
}
</style>